<template>
    <div>
        <v-card>
            <v-system-bar
            color="primary"
            lights-out
            height="50"
            >
            <v-img
            alt="Vuetify Logo"
            class="shrink mr-2"
            contain
            src="vuetify-logo-dark.png"
            transition="scale-transition"
            width="50"
            >
            </v-img>
            <v-text><h2>WorkingPlatForm</h2></v-text>

            <v-tabs
            v-model="tab"
            align-with-title
            background-color="primary accent-4"
            >
            <v-tabs-slider color="yellow"></v-tabs-slider>

            <v-tab
                v-for="item in titletems"
                :key="item"
                @click="click_button(item)"
            >
                <v-icon v-text="item.icon"></v-icon>{{ item.text }}
            </v-tab>
            </v-tabs>

            <v-spacer></v-spacer>
<!--            <v-btn-->
<!--                href="http://127.0.0.1:8001/main/"-->
<!--                target="_blank"-->
<!--                text-->
<!--            >-->
<!--                <span class="mr-2">FSK-Update</span>-->
<!--                <v-icon>mdi-open-in-new</v-icon>-->
<!--            </v-btn>-->
            <v-btn
                @click="login"
                target="_blank"
                text
            >
                <span class="mr-2">登录</span>
                <v-icon>mdi-login-variant</v-icon>
            </v-btn>
            </v-system-bar>
        </v-card>

        <v-card min-height="875px" max-height="1000px">
            <v-main>
                <router-view
                  @changeTaskID="changeTaskID($event)"
                />
            </v-main>
        </v-card>
    </div>
</template>


<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
    data: () => ({
      tab: 0,
      drawer: false,
      group: 2,
      titletems: [
            { text: "首页", icon: "mdi-home", router: "Home" },
            { text: "待办任务", icon: "mdi-format-list-checkbox", router: "Summary" },
            { text: "文档库", icon: "mdi-file-document-edit-outline", router: "List" },
            { text: "定时任务", icon: "mdi-camera-timer", router: "Job" },
            { text: "场景生成", icon: "mdi-table-edit", router: "Scene" },
        ],
    }),
    methods: {
        click_button(item) {
            this.$router.push({ name: item.router });
        },
        login: function(){
            this.$router.push({ name: 'Login' });
        },
        changeTaskID(e){
            console.log(e)
            this.tab = e
        }

    },
})
</script>

<style scoped>

</style>
